<template>
  <div style="overflow: auto" :style="{ height: height + 'px' }">
    <h2 v-if="!props.type">隔离设置情况</h2>
    <el-table :data="filteredData? filteredData : data" style="width: 100%" border>
      <el-table-column prop="name" label="隔离设施情况" />
      <el-table-column prop="sgs" label="事故起数" />
      <el-table-column prop="sgsRatio" label="占总数" />
      <el-table-column prop="swrs" label="死亡人数" />
      <el-table-column prop="swrsRatio" label="占总数" />
      <el-table-column prop="ssrs" label="受伤人数" />
      <el-table-column prop="ssrsRatio" label="占总数" />
    </el-table>
    <h2 v-if="!props.type">中央隔离设施</h2>
    <el-table :data="data2" style="width: 100%" v-if="props.data2" border>
      <el-table-column prop="name" label="中央隔离设施" />
      <el-table-column prop="sgs" label="事故起数" />
      <el-table-column prop="sgsRatio" label="占总数" />
      <el-table-column prop="swrs" label="死亡人数" />
      <el-table-column prop="swrsRatio" label="占总数" />
      <el-table-column prop="ssrs" label="受伤人数" />
      <el-table-column prop="ssrsRatio" label="占总数" />
    </el-table>
    <h2 v-if="!props.type">路侧防护设施</h2>
    <el-table :data="data3" style="width: 100%" v-if="props.data3" border>
      <el-table-column prop="name" label="路侧防护设施" />
      <el-table-column prop="sgs" label="事故起数" />
      <el-table-column prop="sgsRatio" label="占总数" />
      <el-table-column prop="swrs" label="死亡人数" />
      <el-table-column prop="swrsRatio" label="占总数" />
      <el-table-column prop="ssrs" label="受伤人数" />
      <el-table-column prop="ssrsRatio" label="占总数" />
    </el-table>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
  },
  data2: {
    type: Array,
  },
  data3: {
    type: Array,
  },

  height: {
    type: Number,
  },
  type: {
    type: String,
  },
  name: {
    type: String,
  },
});

const filteredData = computed(() => {
  if (props.type === "IsolationFacility") {
    return props.data.filter((item) => item.name === props.name);
  }
});
</script>

<style lang="less" scoped>
h2 {
  font-size: 24px;
  color: #c9cdfe;
  margin-bottom: 8px;
  display: flex;
}
</style>
